<template>
  <view class="page">
    <demo-block title="栗子海报">
      <l-painter
        css="box-sizing: border-box;width: 750rpx; padding: 50rpx 40rpx;background: linear-gradient(180deg, #1676FD 0%, #30A1F3 84%, #29ADF6 100%);"
        @fail="fail"
        @done="done"
        pathType="url"
        ref="poster"
        performance
      >
        <l-painter-view css="display:flex;justify-content:space-between;align-items:center;">
          <l-painter-text text="供需信息" css="color:#fff;font-size: 32rpx;" />
          <l-painter-text :text="info?.viewedCount + '人在这交流'" css="color:#fff; font-size: 24rpx" />
        </l-painter-view>

        <l-painter-view css="margin:0 auto; margin-top: 36rpx; padding: 32rpx; background: #ffffff; border-radius: 16rpx; width: 600rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
          <l-painter-view css="display:flex;align-items:center">
            <l-painter-image :src="info?.avatar" css="background: #ffffff; object-fit: cover; width: 84rpx; height: 84rpx; border-radius: 50%;margin-right:20rpx;" />
            <l-painter-view>
              <l-painter-text :text="info?.name" css="padding-bottom: 10rpx; color: #1E1E1E; font-size: 32rpx;" />
              <l-painter-view>
                <l-painter-text :text="info?.company + '  ' + info?.job" css="color: #BEBEBE; font-size: 24rpx" />
              </l-painter-view>
            </l-painter-view>
          </l-painter-view>
          <l-painter-view css="min-height:400rpx;padding-bottom: 10rpx;margin-top:40rpx;">
            <l-painter-text :text="info?.content" css="color: #1E1E1E; font-size: 32rpx; fontWeight: bold;" />
          </l-painter-view>
        </l-painter-view>
      </l-painter>
    </demo-block>
  </view>
</template>

<script lang="ts" setup>
import { BASE_UPLOADURL } from "@/utils/request";
import { ref } from "vue";
const { info } = defineProps<{
  info: orderTypes.orderDetails;
}>();
const poster = ref();
const picture = ref("");
const show = ref(false);
const fail = () => {};
const done = () => {
  console.log("绘制完成:");
};
const save = () => {
  uni.showLoading({
    title: "海报加载中",
  });
  setTimeout(() => {
    poster.value.canvasToTempFilePath({
      fileType: "jpg",
      quality: 1,
      width: 300,
      height: 500,
      success: (res: any) => {
        console.log(res.tempFilePath);
        uni.uploadFile({
          url: BASE_UPLOADURL, //仅为示例，非真实的接口地址
          filePath: res.tempFilePath,
          name: "file",
          header: {
            Authorization: uni.getStorageSync("token"),
          },
          success: (uploadFileRes) => {
            console.log(uploadFileRes, "uploadFileRes");
            picture.value = JSON.parse(uploadFileRes.data).data;
            // saveImage();
            setTimeout(() => {
              shareImg();
            }, 700);
          },
        });
      },
      fail(e: any) {
        console.log("???????????", e);
      },
    });
  }, 700);
};
const shareImg = () => {
  console.log(1231);
  uni.downloadFile({
    url: picture.value, //分享的图片的链接
    success: (res) => {
      console.log(res);
      uni.showShareImageMenu({
        path: res.tempFilePath,
        complete() {
          setTimeout(() => {
            uni.hideLoading();
          }, 300);
        },
      });
    },
    complete() {
      //隐藏loading
      uni.hideLoading();
    },
    fail(err) {
      console.log(err, "shareImg");
    },
  });
};
// 保存图征
const saveImage = () => {
  uni.saveImageToPhotosAlbum({
    filePath: picture.value,
    success(res) {
      uni.showToast({
        title: "已保存到相册",
        icon: "success",
        duration: 2000,
      });
    },
    fail(err) {
      console.log(err);
    },
  });
};
defineExpose({
  save,
});
</script>
<style>
.page {
  position: absolute;
  left: -999px;
  top: -999px;
}
</style>
